<template>
  <AdminLayout title="规格管理" subtitle="管理产品规格属性">
    <template #actions>
      <Link :href="route('admin.specifications.create')" 
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors duration-200">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
        添加规格属性
      </Link>
    </template>

    <!-- 删除确认对话框 -->
    <ConfirmDialog
      :show="showDeleteDialog"
      title="删除规格属性"
      :message="deleteMessage"
      warning="删除后无法恢复，请确认是否继续？"
      type="danger"
      confirm-text="删除"
      @close="showDeleteDialog = false"
      @confirm="confirmDelete"
    />

    <!-- 规格属性列表 -->
    <div class="bg-white shadow-sm rounded-lg">
      <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">规格属性列表</h3>
      </div>
      
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                属性名称
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                类型
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                选项
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                状态
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                排序
              </th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                创建时间
              </th>
              <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                操作
              </th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <tr v-for="attribute in attributes.data" :key="attribute.id" class="hover:bg-gray-50">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div>
                    <div class="text-sm font-medium text-gray-900">
                      {{ attribute.name }}
                    </div>
                    <div class="text-sm text-gray-500">
                      {{ attribute.slug }}
                    </div>
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                      :class="getTypeClass(attribute.type)">
                  {{ getTypeLabel(attribute.type) }}
                </span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                <div v-if="attribute.options && attribute.options.length > 0" class="flex flex-wrap gap-1">
                  <span v-for="option in attribute.options.slice(0, 3)" :key="option" 
                        class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800">
                    {{ option }}
                  </span>
                  <span v-if="attribute.options.length > 3" 
                        class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800">
                    +{{ attribute.options.length - 3 }}
                  </span>
                </div>
                <span v-else class="text-gray-400">无选项</span>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="flex flex-col space-y-1">
                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
                        :class="attribute.is_required ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'">
                    {{ attribute.is_required ? '必选' : '可选' }}
                  </span>
                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
                        :class="attribute.is_variant ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'">
                    {{ attribute.is_variant ? '影响规格型号' : '不影响规格型号' }}
                  </span>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {{ attribute.sort_order }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                {{ attribute.created_at }}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <div class="flex items-center justify-end space-x-2">
                  <Link :href="route('admin.specifications.edit', attribute.id)" 
                        class="text-gray-600 hover:text-gray-900 transition-colors duration-200">
                    编辑
                  </Link>
                  <button @click="deleteAttribute(attribute)" 
                          class="text-red-600 hover:text-red-900 transition-colors duration-200">
                    删除
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div v-if="attributes.links" class="px-6 py-4 border-t border-gray-200">
        <nav class="flex items-center justify-between">
          <div class="flex-1 flex justify-between sm:hidden">
            <Link v-if="attributes.prev_page_url" 
                  :href="attributes.prev_page_url" 
                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
              上一页
            </Link>
            <Link v-if="attributes.next_page_url" 
                  :href="attributes.next_page_url" 
                  class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
              下一页
            </Link>
          </div>
          <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
              <p class="text-sm text-gray-700">
                显示第 <span class="font-medium">{{ attributes.from }}</span> 到 
                <span class="font-medium">{{ attributes.to }}</span> 条，共 
                <span class="font-medium">{{ attributes.total }}</span> 条记录
              </p>
            </div>
            <div>
              <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                <Link v-for="link in attributes.links" 
                      :key="link.label"
                      :href="link.url" 
                      v-html="link.label"
                      :class="[
                        link.active 
                          ? 'z-10 bg-gray-900 border-gray-900 text-white' 
                          : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50',
                        'relative inline-flex items-center px-4 py-2 border text-sm font-medium'
                      ]"
                      :disabled="!link.url" />
              </nav>
            </div>
          </div>
        </nav>
      </div>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Link, router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import ConfirmDialog from '@/Components/ConfirmDialog.vue'
import { useNotification } from '@/composables/useNotification'

const props = defineProps({
  attributes: {
    type: Object,
    required: true
  }
})

// 通知功能
const { showSuccess, showError } = useNotification()

// 删除确认对话框
const showDeleteDialog = ref(false)
const deleteDialogData = ref({
  id: null,
  name: ''
})

const deleteMessage = computed(() => {
  return `确定要删除规格属性"${deleteDialogData.value.name}"吗？`
})

const getTypeClass = (type) => {
  const classes = {
    select: 'bg-blue-100 text-blue-800',
    color: 'bg-purple-100 text-purple-800',
    size: 'bg-green-100 text-green-800',
    text: 'bg-gray-100 text-gray-800',
    number: 'bg-yellow-100 text-yellow-800'
  }
  return classes[type] || 'bg-gray-100 text-gray-800'
}

const getTypeLabel = (type) => {
  const labels = {
    select: '下拉选择',
    color: '颜色选择',
    size: '尺寸选择',
    text: '文本输入',
    number: '数字输入'
  }
  return labels[type] || type
}

const deleteAttribute = (attribute) => {
  deleteDialogData.value = {
    id: attribute.id,
    name: attribute.name
  }
  showDeleteDialog.value = true
}

const confirmDelete = () => {
  router.delete(route('admin.specifications.destroy', deleteDialogData.value.id), {
    onSuccess: () => {
      // 后端已经发送了 flash 消息，这里不需要重复显示
      showDeleteDialog.value = false
    },
    onError: () => {
      showError('删除失败', '删除规格属性失败，请重试')
    }
  })
}
</script>
